<template>
  <view class="sort-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="back" size="24"></uni-icons>
      </view>
      <view class="nav-title">排序</view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 排序选项列表 -->
    <view class="sort-list">
      <view 
        class="sort-item" 
        v-for="(item, index) in sortOptions" 
        :key="index"
        @click="selectSort(item)"
      >
        <text :class="{ 'active': currentSort === item.value }">{{item.label}}</text>
        <uni-icons 
          v-if="currentSort === item.value" 
          type="checkmarkempty" 
          size="20" 
          color="#1890ff"
        ></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentSort: 'default',
      sortOptions: [
        { label: '默认排序', value: 'default' },
        { label: '创建时间升序', value: 'createTimeAsc' },
        { label: '创建时间降序', value: 'createTimeDesc' },
        { label: '合同金额升序', value: 'amountAsc' },
        { label: '合同金额降序', value: 'amountDesc' },
        { label: '到期时间升序', value: 'expireTimeAsc' },
        { label: '到期时间降序', value: 'expireTimeDesc' }
      ]
    }
  },
  onLoad(options) {
    if (options.sort) {
      this.currentSort = options.sort;
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectSort(item) {
      this.currentSort = item.value;
      // 将选中的排序方式返回给上一页
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      if (prevPage) {
        prevPage.$vm.updateSort(item);
      }
      setTimeout(() => {
        uni.navigateBack();
      }, 200);
    }
  }
}
</script>

<style lang="scss">
.sort-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 88rpx;
  background-color: #fff;
  position: relative;
  
  .nav-left {
    width: 80rpx;
  }
  
  .nav-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .nav-right {
    width: 80rpx;
  }
}

.sort-list {
  background-color: #fff;
  margin-top: 20rpx;
  
  .sort-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
    
    text {
      font-size: 28rpx;
      color: #333;
      
      &.active {
        color: #1890ff;
      }
    }
  }
}
</style>